<template>
    <div>
        <!-- 挂号和清空按钮 -->
        <el-button type="primary" size="small" style="margin-left: 3px" @click="addNewReg()">
            <el-icon>
                <Edit/>
            </el-icon> &nbsp;挂号
        </el-button>
        <el-button type="primary" size="small" style="margin-left: 3px" @click="clear()">
            <el-icon>
                <Refresh/>
            </el-icon>&nbsp;清空
        </el-button>

        <br><br>
        <div style="font-size:15px;font-family:'Microsoft YaHei'">挂号信息</div>&nbsp;
        <!-- 病历号输入框 -->
        <el-row :gutter="2">
            <el-col :span="4">
                <div class="grid-content bg-purple">
                    <span style="color:red">*</span>
                    <span style="font-size:13px;font-family:'Microsoft YaHei'">病 历 号 :</span>&nbsp;
                    <el-input placeholder="输入病历号" style="width: 110px" again="left" size="small"
                              v-model="formData.casenumber"
                              @blur="blhcx()">
                    </el-input>
                </div>
            </el-col>
            <!-- 姓名输入框 -->
            <el-col :span="4">
                <div class="grid-content bg-purple">
                    <span style="color:red">*</span>
                    <span style="font-size:13px;font-family:'Microsoft YaHei'">姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名:</span>&nbsp;
                    <el-input placeholder="输入姓名" style="width: 110px" again="left" size="small"
                              v-model="formData.realname">
                    </el-input>
                </div>
            </el-col>
            <!-- 性别选择框 -->
            <el-col :span="4">
                <div class="grid-content bg-purple">
                    <span style="color:red">*</span>
                    <span style="font-size:13px;font-family:'Microsoft YaHei'">性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别:</span>&nbsp;
                    <el-select placeholder="选择性别" style="width: 110px" size="small" v-model="formData.gender">
                        <el-option
                                v-for="item in sexData"
                                :key="item.id"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </div>
            </el-col>
            <!-- 出生日期选择框 -->
            <el-col :span="4">
                <div class="grid-content bg-purple">
                    <span style="color:red">*</span>
                    <span style="font-size:13px;font-family:'Microsoft YaHei'">出生日期:</span>&nbsp;
                    <el-date-picker
                            v-model="formData.birthdate"
                            type="date"
                            placeholder="选择出生日期" size="small" style="width: 125px" value-format="YYYY-MM-DD"
                            @change="calculateAge()">
                    </el-date-picker>
                </div>
            </el-col>
            <!-- 年龄输入框 -->
            <el-col :span="4">
                <div class="grid-content bg-purple">
                    <span style="color:red">*</span>
                    <span style="font-size:13px;font-family:'Microsoft YaHei'">年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;龄:</span>&nbsp;
                    <el-input placeholder="自动计算" style="width: 110px" again="left" size="small"
                              v-model="formData.age"
                              readonly>
                    </el-input>
                </div>
            </el-col>
            <!-- 身份证号输入框 -->
            <el-col :span="4">
                <div class="grid-content bg-purple">
                    <span style="font-size:13px;font-family:'Microsoft YaHei'">身份证号:</span>&nbsp;
                    <el-input placeholder="输入身份证号" style="width: 110px" again="left" size="small"
                              v-model="formData.idnumber">
                    </el-input>
                </div>
            </el-col>
            <!-- 家庭住址输入框 -->
            <el-col :span="4">
                <div class="grid-content bg-purple">
                    <span style="font-size:13px;font-family:'Microsoft YaHei'">家庭住址:</span>&nbsp;
                    <el-input placeholder="输入家庭住址" style="width: 110px" again="left" size="small"
                              v-model="formData.homeaddress">
                    </el-input>
                </div>
            </el-col>
            <!-- 挂号科室选择框 -->
            <el-col :span="4">
                <div class="grid-content bg-purple">
                    <span style="color:red">*</span>
                    <span style="font-size:13px;font-family:'Microsoft YaHei'">挂号科室:</span>&nbsp;
                    <el-select placeholder="挂号科室" style="width: 108px" size="small" v-model="formData.deptid"
                               @change="Dept_select()">
                        <el-option
                                v-for="item in deptData"
                                :key="item.id"
                                :label="item.deptname"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </div>
            </el-col>
            <!-- 号别选择框 -->
            <el-col :span="4">
                <div class="grid-content bg-purple">
                    <span style="color:red">*</span>
                    <span style="font-size:13px;font-family:'Microsoft YaHei'">号&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别:</span>&nbsp;
                    <el-select placeholder="号别" style="width: 100px" size="small" v-model="formData.registleid"
                               @change="RegistLe_select()">
                        <el-option
                                v-for="item in categories6"
                                :key="item.did"
                                :label="item.RegistName"
                                :value="item.did">
                        </el-option>
                    </el-select>
                </div>
            </el-col>
            <!-- 看诊医生选择框 -->
            <el-col :span="4">
                <div class="grid-content bg-purple">
                    <span style="color:red">*</span>
                    <span style="font-size:13px;font-family:'Microsoft YaHei'">看诊医生:</span>
                    <el-select placeholder="看诊医生" style="width: 110px" size="small" v-model="formData.userid"
                               @change="user_select()">
                        <el-option
                                v-for="item in doctorData"
                                :key="item.id"
                                :label="item.realName"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </div>
            </el-col>
            <!-- 病历本选择框 -->
            <el-col :span="4">
                <div>
                    <span style="font-size:13px;font-family:'Microsoft YaHei'">病历本</span>
                    <input type="checkbox" name="" v-model="formData.isbook" true-value="是" false-value="否"
                           @change="book_select()">
                </div>
            </el-col>
            <!-- 应收金额输入框 -->
            <el-col :span="4">
                <div>
                    <span style="color:red">*</span>
                    <span style="font-size:13px;font-family:'Microsoft YaHei'">应收金额:</span>&nbsp;
                    <el-input placeholder="应收金额" style="width: 100px" again="left" size="small" v-model="formData.fee"
                              readonly>
                    </el-input>
                </div>
            </el-col>
            <!-- 收费方式选择框 -->
            <el-col :span="4">
                <div>
                    <span style="color:red">*</span>
                    <span style="font-size:13px;font-family:'Microsoft YaHei'">收费方式:</span>&nbsp;
                    <el-select placeholder="收费方式" style="width: 100px" size="small" v-model="formData.feetype">
                        <el-option
                                v-for="item in categories3"
                                :key="item.ID"
                                :label="item.ConstantName"
                                :value="item.ID">
                        </el-option>
                    </el-select>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script setup>
import {onMounted, ref} from 'vue'
import service from '@/utils/request'
import { useCounterStore } from "@/stores/counter.js";

const counter = useCounterStore();
let formData = ref({
    casenumber: '',
    realname: '',
    gender: null,
    birthdate: null,
    age: null,
    idnumber: '',
    homeaddress: '',
    deptid: null,
    registleid: null,
    userid: null,
    isbook: '否',
    fee: 0,
    feetype: null,
    registerid: counter.vo_user.userid,
    visitdate: new Date(),
    noon: '上午',
    settleid: 1
});
let sexData = ref([]);       // 性别数据
let deptData = ref([]);
let doctorData = ref([]);
let categories3 = ref([]);
let categories6 = ref([]);
let categories5 = ref([{noon: '上午'}, {noon: '下午'}]);

// 挂号操作
function addNewReg() {
    // 计算应收金额
    calculateFee();
    console.log(formData.value);
    service.post("/register/add", formData.value).then((res) => {
        if (res.data.code === 200) {
            // 挂号成功，打印发票等操作
            console.log('挂号成功');
        } else {
            console.log('挂号失败');
        }
    });
}

// 清空输入内容
function clear() {
    formData.value = {
        casenumber: '',
        realname: '',
        gender: null,
        birthdate: null,
        age: null,
        idnumber: '',
        homeaddress: '',
        deptid: null,
        registleid: null,
        userid: null,
        isbook: '否',
        fee: 0,
        feetype: null,
        registerid: counter.vo_user.userid,
        visitdate: new Date(),
        noon: '上午',
        settleid: 1
    };
}

// 根据科室获取医生信息
function Dept_select() {
    service.get("/user/getbydeptid?deptid=" + formData.value.deptid).then(
        res => {
            console.log(res.data);
            doctorData.value = res.data;
        }
    );
}

// 计算年龄
function calculateAge() {
    if (formData.value.birthdate) {
        const birthdate = new Date(formData.value.birthdate);
        const today = new Date();
        const timeDiff = today - birthdate;
        const daysDiff = Math.floor(timeDiff / (1000 * 60 * 60 * 24));
        const monthsDiff = Math.floor(daysDiff / 30.44);
        let yearsDiff = today.getFullYear() - birthdate.getFullYear();
        const monthCheck = today.getMonth() - birthdate.getMonth();
        if (monthCheck < 0 || (monthCheck === 0 && today.getDate() < birthdate.getDate())) {
            yearsDiff--;
        }
        formData.value.age = yearsDiff;
    }
}

// 计算应收金额
function calculateFee() {
    // 根据挂号级别、医生、是否要病历本计算费用
    let fee = 0;
    // 这里假设挂号级别和医生有对应的费用，需要根据实际情况修改
    if (formData.value.registleid === 1) {
        fee = 20;
    }
    if (formData.value.isbook === '是') {
        fee += 1;
    }
    formData.value.fee = fee;
}

onMounted(() => {
    // 初始化性别数据
    sexData.value = [
        {id: 1, label: '男', value: 1},
        {id: 2, label: '女', value: 2}
    ];
    // 获取科室数据
    service.get("/dept/getall").then(
        res => {
            deptData.value = res.data;
        }
    );
    // 获取号别数据
    service.get("/registle/getall").then(
        res => {
            categories6.value = res.data;
        }
    );
    // 获取收费方式数据
    service.get("/feetype/getall").then(
        res => {
            categories3.value = res.data;
        }
    );
});
</script>